<template>
    <a-card :bordered="false">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
            <a-form layout="inline" @keyup.enter.native="searchQuery">
                <a-row :gutter="24">
                    <a-col :span="6">
                        <a-form-model-item label="站点">
                            <j-dict-select-tag v-model="queryParam.id" dict-code="HC_SITE,NAME,ID"
                                placeholder="请选择站点" @change="" />
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="6">
                        <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
                            <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                            <a-button type="primary" @click="searchReset" icon="reload"
                                style="margin-left: 8px">重置</a-button>
                        </span>
                    </a-col>
                </a-row>
            </a-form>
        </div>
        <div>
            <a-table ref="table" size="middle" :scroll="{ x: true }" :bordered="false" rowKey="id" :columns="columns"
                :dataSource="dataSource" :pagination="ipagination" :loading="loading" class="j-table-force-nowrap"
                @change="handleTableChange">
                <template slot="listSlot" slot-scope="text">
                    <span v-for="(item, index) in text"
                        :style="{ 'color': item.amount || item.percentage ? 'black' : 'red' }">
                        {{ item.merchantName }}{{ item.amount ? item.amount + '元' : item.percentage ? item.percentage +
                            '%'
                            : '0元' }}；
                    </span>
                </template>
                <span slot="action" slot-scope="text, record">
                    <a @click="showEditModal(record)">编辑</a>
                </span>
            </a-table>
        </div>
        <siteCommissionSetModal ref="siteCommissionSetModal" @loadData="loadData"></siteCommissionSetModal>
    </a-card>
</template>

<script>
import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { getAction, postAction } from '@api/manage'
import siteCommissionSetModal from './modules/siteCommissionSet.vue'

export default {
    name: 'SiteCommissionList',
    mixins: [JeecgListMixin, mixinDevice],
    components: { siteCommissionSetModal },
    data() {
        return {
            description: '企业',
            // 表头
            columns: [
                {
                    title: '#',
                    dataIndex: '',
                    key: 'rowIndex',
                    width: 60,
                    align: "center",
                    customRender: function (t, r, index) {
                        return parseInt(index) + 1;
                    }
                },
                {
                    title: '站点名称',
                    align: "center",
                    dataIndex: 'name',
                },
                {
                    title: '门店名称和佣金',
                    align: "left",
                    dataIndex: 'hcSiteCommissionsList',
                    scopedSlots: { customRender: 'listSlot' },
                },
                {
                    title: '操作',
                    dataIndex: 'action',
                    align: "center",
                    fixed: "right",
                    width: 147,
                    scopedSlots: { customRender: 'action' }
                }
            ],
            url: {
                list: "hc/hcSite/siteCommissionList",
            },
            dictOptions: {},
            superFieldList: [],
            baseUrl: '',
        }
    },
    methods: {
        showEditModal(record) {
            this.$refs.siteCommissionSetModal.edit(record);
        }
    }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>